<template>
  <div class="city_body">
    <div class="city_list">
      <loading v-if="isLoading"></loading>
      <scroll v-else ref='scroll'>
        <div>
          <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
              <li v-for="item in hotCities" :key="item.id" @tap="handleToCity(item.nm, item.id)">{{item.nm}}</li>
            </ul>
          </div>
          <div class="city_sort">
            <div :ref="item.index" v-for="item in cities" :key="item.index">
              <h2 >{{item.index}}</h2>
              <ul>
                <li v-for="v in item.list" :key="v.id" @tap="handleToCity(v.nm, v.id)">{{v.nm}}</li>
              </ul>
            </div>	
          </div>
        </div>
      </scroll>
    </div>
    <div class="city_index">
      <ul>
        <li v-for="item in cities" :key="item.index" @touchstart="handleToIndex(item.index)">{{item.index}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [],
      hotCities: [],
      isLoading: true
    }
  },
  mounted() {
    this.fetch()
  },
  methods:{
    handleToCity(nm, id) {
      this.$store.commit('city/CITY_INFO', {nm, id})
      window.localStorage.setItem('cityNm', nm)
      window.localStorage.setItem('cityId', id)
      this.$router.push('/movie/nowing')
    },
    handleToIndex(index) {
      this.$refs.scroll.handleScrollTo(-this.$refs[index][0].offsetTop)
    },
    async fetch() {
      let cities = window.localStorage.getItem('cities')
      let hotCities = window.localStorage.getItem('hotCities')
      if(cities && hotCities){
        this.cities = JSON.parse(cities)
        this.hotCities = JSON.parse(hotCities)
        this.isLoading = false
      }else {
        const res = await this.$axios.get('/api/cityList')
        if(res.data.msg === 'ok') {
          this.isLoading = false
          let cities = res.data.data.cities
          // [{index: 'B', list:[{id: 1, nm: "北京", isHot: 1, py: "beijing"}]}]
          const {cityList, hotList} = this.formatCityList(cities)
          this.cities = cityList
          this.hotCities = hotList
          window.localStorage.setItem('cities', JSON.stringify(this.cities))
          window.localStorage.setItem('hotCities', JSON.stringify(this.hotCities))
        }
      }
    },
    formatCityList(cities) {
      let cityList = []
      let hotList = []
      for(let v of cities) {
        // 添加cityList
        let firstCase = v.py.slice(0,1).toUpperCase()
        if(toCom(firstCase)) {
          cityList.push({
            index: firstCase,
            list: [{nm: v.nm, id: v.id}]
          })
        } else{
          for(let m of cityList) {
            if(m.index === firstCase) {
              m.list.push(v)
            }
          }
        }
        // 添加热门城市
        if(v.isHot === 1) {
          hotList.push(v)
        }
      }
      // 判断首字母函数
      function toCom(firstCase) {
        for (let v of cityList) {
          if(v.index === firstCase) {
            return false
          }
        }
        return true
      }
      // 排序cityList
      cityList.sort((a,b) => {
        if(a.index > b.index) {
          return 1
        }else{
          return -1
        }
      })
      return {cityList, hotList}
    }
  },
}
</script>

<style scoped>

#content .city_body {
  display: flex;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: 45px;
}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px; height:100%}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ position: fixed; right: 0; color: green; width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}

</style>
